<template>
  <div id='tmpl'>
      <div class="cate">
          <ul v-bind="{style:'width:'+width+'px'}" ref="ul"> <!-- ref可以获取当前元素 -->
              <li>全部</li><li v-for="(item,index) in list" :key="index">{{item.title}}</li> <!-- 不要换行这种有计算宽的如果换行会有换行空格，计算就够了 -->
          </ul>
      </div>
      <div class="imglist">
          <ul>
              <li v-for="(item,index) in imglist" :key="index">
                  <router-link v-bind="{to:'/photo/photoinfo/'+item.id}">
                    <img v-lazy="item.img_url">
                    <div class="descrip">
                        <h5>{{item.title}}</h5>
                        <p v-html="item.zhaiyao"></p>
                    </div>
                   </router-link>
              </li>   
          </ul>
      </div>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
import { lazyload } from "mint-ui";
export default {
  name: "component_name",
  data() {
    return {
      list: [],
      width: 320,
      imglist: []
    };
  },
  created() {
    this.getcate();
    this.getimgList();
    /*   var lis=document.querySelectorAll(".cate li");
       var width=0;
      
      lis.forEach(function(ele){
          
            width+=(ele.offsetWidth);
            //console.log(width)         
      })
      //console.log(lis)
      this.width=width+6;
      //console.log(width)
      console.log(this.width) */
  },
  methods: {
    //获取列表
    getcate() {
      //console.log(width)
      var url = `${this.$common.apidomain}/api/getimgcategory`;
      this.$http.get(url).then(res => {
        //console.log(res)
        var data = res.body;
        if (data.status != 0) {
          Toast(data.message);
          return;
        }
        this.list = data.message;
        /*  var count = data.message.length + 1;
        var width = 80;
        this.width = width * count; */
        this.$nextTick(function() {
          //获取dom元素最好用vue自带的方法ref
          // DOM 更新了
          // var lis=document.querySelectorAll(".cate li");
          var lis = this.$refs.ul.children; //获取它的子元素是属性
          console.log(lis)
          var w = 0;
          for(var i=0;i<lis.length;i++){
            w+=lis[i].offsetWidth;
            console.log(lis[i].offsetWidth)
            //console.log(width)
          }
          this.width=w;
          console.log(w)
        });
      });
    },
    //获取图片列表
    getimgList(cateid = 0) {
      //es6默认值写法代替函数内cateid=cateid||0
      var url = `${this.$common.apidomain}/api/getimages/${cateid}`;
      this.$http.get(url).then(res => {
        console.log(res);
        var data = res.body;
        if (data.status != 0) {
          Toast(data.message);
          return;
        }
        this.imglist = data.message;
      });
    }
  }
};
</script>
<style lang="css" scoped>
.cate {
  width: 375px;
  max-width: 375px;
  overflow-x: auto;
}
.cate ul {
  padding: 0;
  margin: 0;
}
.cate ul li {
  cursor: pointer;
  display: inline-block;
  padding: 10px 6px;
  color: #9904ff;
  font-size: 14px;
}
.imglist ul {
  list-style: none;
  padding: 0;
}
.imglist ul li {
  height: 300px;
  position: relative;
}
.descrip {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  padding-left: 10px;
}
.descrip h5 {
  color: #fff;
}
.descrip p {
  margin: 0;
  color: #fff;
}
.imglist img {
  display: block;
  width: 100%;
  height: 300px;
}
image[lazy="loading"] {
  width: 40px;
  height: 300px;
  margin: auto;
}
</style>